<template>
	<view class="content">
		<view class="video ">
			<view class="head-tab " :style="[{height:CustomBar + 'px'}]">
				<view class="view flex align-center" :style="style">
					<view class="back cuIcon-back  middle" @tap="back">

					</view>
				</view>
			</view>

			
			<!-- <video src="" controls></video> -->
		</view>

		<!-- <view class="list ">
			<view class="taber grid col-3">
				<view class="middle item flex-direction " v-for="(item,index) in taber" :key="index"
					@click="changeTab(index)" :class="tabIndex==index?'hover':'nohover'">
					{{item.name}}
					<view class="line">

					</view>
				</view>
			</view>

			<scroll-view scroll-y="true" class="list-scroll-view ">
				<jianjie class="" v-if="tabIndex==0"></jianjie>
				<category @playVideo="playVideo" class="" v-if="tabIndex==1"></category>
				<discuss  v-if="tabIndex==2"></discuss>
			</scroll-view>
		</view>
	 -->

	</view>
</template>

<script>
	import jianjie from "./components/jianjie.vue"
	import category from "./components/category.vue"
	import discuss from "./components/discuss.vue"
	export default {
		components: {
			jianjie,
			category,
			discuss
		},
		data() {
			return {
				title: "云课堂",
				tabIndex: 0,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,

				taber: [{
						name: "简介",
						path: "/pages/cloudClassroom/zhibo"
					},
					{
						name: "目录",
						path: "/pages/cloudClassroom/zhibo"
					},
					{
						name: "讨论",
						path: "/pages/cloudClassroom/zhibo",
						notice: true
					}

				],
				videoInfo: {
					url:""
				}


			}
		},
		onLoad(option) {
			
			console.log(option.url);
			this.videoInfo.url = option.url;

		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods: {
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				console.error('live-player error:', e.detail.errMsg)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			changeTab(i) {
				this.tabIndex = i;
			},
			/**
			 * 
			 */
			jumpTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			playVideo() {
				uni.showToast({
					title: "视频暂未开播",
					icon: "none"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		$w: calc(100vw*(670/750));
		overflow: hidden;
		width: 100vw;
		height: 100vh;

		.video {
			width: 100vw;
			height: calc(100vw*(476/750));

			video,
			live-player {

				width: 100vw;
				height: calc(100vw*(476/750));
			}


			.head-tab {
				width: 100vw;
				z-index: 99;
				position: absolute;
				top: 0;

				.view {
					.cuIcon-back {
						height: inherit;
						margin-left: calc(100vw*(40/750));
						font-size: calc(100vw*(40/750));
						margin-top: 6rpx;
						color: white;


					}

					height: inherit;

					.tab-box {
						height: inherit;
						white-space: nowrap;
						font-family: PingFang SC;

						.hover {
							font-size: calc(100vw*(40/750));
							font-weight: 800;
							color: #333333;
						}

						.nohover {
							font-size: 32rpx;
							font-weight: 500;
							color: #999999;
						}


						.item {

							margin-left: calc(100vw*(40/750));
							display: inline-flex;
							position: relative;
							height: inherit;

							.cuIcon-title {
								margin-top: -20rpx;
							}
						}

					}

				}






			}
		}


		.list {
			width: 100vw;

			.taber {

				width: $w;
				margin-left: calc(100vw*(40/750));

				.item {
					height: calc(100vw*(100/750));
					font-size: 32rpx;
					font-family: PingFang SC;

				}

				.hover {
					font-weight: 800;
					color: #1270E0;
					position: relative;

					.line {
						width: calc(100vw*(40/750));
						display: block;
						height: 6rpx;
						background: #1270E0;
						border-radius: 3rpx;
						position: absolute;
						bottom: 20rpx;

					}
				}

				.nohover {
					font-weight: 500;
					color: #999999;

					.line {
						display: none;
					}
				}


			}

			.list-scroll-view {

				height: calc(100vh*(476/750));
			}
		}

	}
</style>
